<template>
  <div>
    <Tips />
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-swipe-cell>
        <van-checkbox
          :name="item.id"
          v-for="item in cartList"
          :key="item.id"
          @click="changeChecked(item)"
        >
          <van-card
            :num="item.number"
            :price="item.market_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <van-stepper v-model="item.number" v-show="isEditing" @change="stepperChange(item)" />
        </van-checkbox>
        <template #right>
          <van-button square type="danger" text="删除" @click="delGood(item.product_id)"/>
        </template>
      </van-swipe-cell>
    </van-checkbox-group>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共
        <span>{{cartTotal.checkedGoodsCount}}</span>件商品,可点击
        <van-button
          :type="isEditing?'danger':'primary'"
          size="small"
          @click="editBtn"
        >{{isEditing?'完成编辑':'编辑'}}</van-button>按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
//引入组件
import Tips from "@/components/Tips";
//引入axios封装的api请求
import {
  GetCartListData,
  ChangeGoodChecked,
  StepperChangeData,
  DeleteGood
} from "@/request/api";
export default {
  name: "Cart",
  data() {
    return {
      //步进器的值
      // value:1,
      // checkedAll: true,
      //选中元素的数组
      result: [],
      //购物车列表数据
      cartList: [],
      //商品总信息
      cartTotal: [],
      //编辑状态下的设置
      isEditing: false
    };
  },
  //每引入一个组件都必须要注册组件
  components: {
    Tips
  },
  //计算属性进行选中，可以控制全选
  computed: {
    checkedAll: {
      get() {
        //什么时候全选1后端选中数据2.组件数据长度
        return this.result.length == this.cartList.length;
      },
      set(val) {
        //即将被修改的值
        //console.log(val)
        //处理id数组
        let ids_arr = [];
        this.cartList.map(item => {
          ids_arr.push(item.product_id);
        });
        //   console.log(ids_arr.join())
        ChangeGoodChecked({
          isChecked: val ? 1 : 0,
          productIds: ids_arr.join()
        }).then(res => {
          if (res.errno == 0) {
            console.log(res);
            this.totalFn(res.data);
          }
        });
      }
    }
  },
  methods: {
    onSubmit() {},
    editBtn() {
      this.isEditing = !this.isEditing;
    },
    //封装方法修改后端数据并
    totalFn(data) {
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;
      //清空this.result
      this.result = [];
      this.cartList.map(item => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    changeChecked(item) {
      if (this.isEditing) return;
      //请求的作用
      //告诉后端改变的数据，后端返回改变的数据
      ChangeGoodChecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          console.log(res);
          this.totalFn(res.data);
        }
      });
    },
    stepperChange(item) {
      // console.log(value)
      StepperChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
    delGood(pid){
        DeleteGood({
          productIds:pid.toString()
        }).then(res=>{
             if(res.errno==0){
               this.totalFn(res.data)
             }
        })
    }
  },
  created() {
    GetCartListData().then(res => {
      if (res.errno == 0) {
        console.log(res);
        this.totalFn(res.data);
      }
    });
  }
};
</script>

<style lang="less" scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 1.5rem;
  .van-checkbox {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid #ccc;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
  border: 1px solid #eee;
}
.van-stepper {
  text-align: right;
}
.van-button{
  height: 100%;
}
</style>